<template>
  <view>
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <wlk-navbar title="门票列表" navbarType='0'></wlk-navbar>
    <block v-if="loadStatus=='nomore' && list.length==0">
      <view class="not-data">
        <u-empty
            :icon="uEmpty.search"
            text="没有搜索结果"
        >
        </u-empty>
      </view>
    </block>
    <block v-else>
      <view class="note-list pd30">
        <view @tap.stop="$Router.push('/pages/ticket/detail?id='+item.id)" class="note-item wd100 bgw pd30 mb20 br04" v-for="(item,index) in list" :key="item.id"  @click="jump('/pages/ticket/detail?id='+item.id)">
          <view class="info-name bold u-line-2 mt20 mb20">{{item.name}}</view>
          <view class="info-img wd100">
            <image class="wd100 br04" lazy-load :src="item.image"  mode="widthFix"/>
          </view>
          <view>
             价格{{item.price}}
          </view>
          <view>
            old-price {{item.old_price}}
          </view>
          <view>
            sales {{item.sales}}
          </view>




        </view>
        <view class="load-more">
          <u-loadmore :status="loadStatus" :loading-text="loadingText"  :loadmore-text="loadmoreText" :nomore-text="nomoreText" dashed  line />
        </view>
      </view>
    </block>

  </view>
</template>

<script>
import { toUrl,formatRichText } from '@/wlkutils/tools';
import share from "@/wlkutils/share";
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
var _self;
export default {
  data() {
    return {
      list:[],
      page: 1,
      loadStatus:'loading',
      loadingText: '努力加载中',
      loadmoreText: '轻轻上拉',
      nomoreText: '实在没有了'

    };
  },
  computed: {
    ...mapGetters(['themeColor','uEmpty'])
  },
  onLoad(options) {
    _self = this;

  },
  onShow() {
    _self.loadStatus = 'loading';
    _self.page = 1;
    _self.list = [];
    _self.getData();
  },
  onShareAppMessage(res){
    return share.setShareInfo();
  },
  onReachBottom() {
    if(this.loadStatus == "nomore"){
      return;
    }
    this.page++;
    this.getData();
  },
  methods: {
    async getData() {
      const res = await uni.$u.http.post("ticket/getList", {
        page: this.page,
      });
      if (res && res.data && res.data.rows) {
        this.list = this.list.concat(res.data.rows);
      }
      this.loadStatus = res.data.rows.length < res.data.limit ? 'nomore' : 'loadmore';
    },
    jump(path){
      toUrl(path);
    },
  },

};
</script>

<style lang="scss">
.note-list{
  .note-item{
    .head-info{
      font-size: $font-base;
      line-height: 40rpx;
    }
    .info-name{
      font-size: $font-lt;
    }
    .info-auth{
      font-size: $font-lt;
    }
    .info-img{

    }
    .line-box{
      background-color: $uni-bg-color-grey;
      .line-image{
        width: 25%;
        height: 155rpx;
        border-radius: 4px;
        overflow: hidden;
      }
      .line-info{
        width: 72%;
        height: 155rpx;
        .title{
          font-size: $font-lt;
        }
        .price-info{
          font-size: $font-base;
          color: $-tour-price-color;
          .price{
            font-size: $font-lg;
          }
        }
        .buy-btn{
          color: #FFFFFF;
          font-size: $font-base;
          padding: 5rpx 30rpx;
          border-radius: 30rpx;
        }
      }
    }
  }
}
</style>
